<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>分析页</title>
  <link rel="stylesheet" href="/static/component/layui/css/layui.css"/>
</head>
<body>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">获取选中节点数据</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-on="setChecked">勾选指定节点</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-on="reload">重载实例</button>
</div>

<div id="ID-tree-demo"></div>

<script src="/static/component/layui/layui.js"></script>
<script>
  layui.use(function () {
    var tree = layui.tree;
    var layer = layui.layer;
    var util = layui.util;

    // 模拟数据
    var data = [{
      title: 'A-1',
      id: 1,
      field: 'name1',
      checked: true,
      spread: true,
      children: [{
        title: 'B-1-1 可允许跳转',
        id: 3,
        field: 'name11',
        href: '',
        children: [{
          title: 'C-1-1-3',
          id: 23,
          field: '',
          children: [{
            title: 'D-1-1-3-1',
            id: 24,
            field: '',
            children: [{title: 'E-1-1-3-1-1', id: 30, field: ''}, {title: 'E-1-1-3-1-2', id: 31, field: ''}]
          }]
        }, {
          title: 'C-1-1-1',
          id: 7,
          field: '',
          children: [{title: 'D-1-1-1-1 可允许跳转', id: 15, field: '', href: ''}]
        }, {title: 'C-1-1-2', id: 8, field: '', children: [{title: 'D-1-1-2-1', id: 32, field: ''}]}]
      }, {
        title: 'B-1-2',
        id: 4,
        spread: true,
        children: [{title: 'C-1-2-1', id: 9, field: '', disabled: true}, {title: 'C-1-2-2', id: 10, field: ''}]
      }, {title: 'B-1-3', id: 20, field: '', children: [{title: 'C-1-3-1', id: 21, field: ''}, {title: 'C-1-3-2', id: 22, field: ''}]}]
    }, {
      title: 'A-2',
      id: 2,
      field: '',
      spread: true,
      children: [{
        title: 'B-2-1',
        id: 5,
        field: '',
        spread: true,
        children: [{title: 'C-2-1-1', id: 11, field: ''}, {title: 'C-2-1-2', id: 12, field: ''}]
      }, {
        title: 'B-2-2',
        id: 6,
        field: '',
        children: [{title: 'C-2-2-1', id: 13, field: ''}, {title: 'C-2-2-2', id: 14, field: '', disabled: true}]
      }]
    }, {
      title: 'A-3',
      id: 16,
      field: '',
      children: [{
        title: 'B-3-1',
        id: 17,
        field: '',
        fixed: true,
        children: [{title: 'C-3-1-1', id: 18, field: ''}, {title: 'C-3-1-2', id: 19, field: ''}]
      }, {title: 'B-3-2', id: 27, field: '', children: [{title: 'C-3-2-1', id: 28, field: ''}, {title: 'C-3-2-2', id: 29, field: ''}]}]
    }];
    // 渲染
    tree.render({
      elem: '#ID-tree-demo',
      data: data,
      showCheckbox: true,  // 是否显示复选框
      onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
      id: 'demo-id-1',
      isJump: true, // 是否允许点击节点时弹出新窗口跳转
      click: function (obj) {
        var data = obj.data;  //获取当前点击的节点数据
        layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
      }
    });
    // 按钮事件
    util.event('lay-on', {
      getChecked: function (othis) {
        var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据

        layer.alert(JSON.stringify(checkedData), {shade: 0});
        console.log(checkedData);
      },
      setChecked: function () {
        tree.setChecked('demo-id-1', [12, 16]); // 勾选对应 id 值的节点
      },
      reload: function () {
        tree.reload('demo-id-1', {}); // 重载实例
      }
    });

  });
</script>

</body>
</html>